import 'package:flutter/material.dart';
import 'package:flutterapp2/extension/extension.dart';
import 'package:flutterapp2/widget/rating_bar.dart';
import 'package:fluttertoast/fluttertoast.dart';

/// Container是一个组合类容器，它本身不对应具体的RenderObject，
/// 它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器，
/// 所以我们只需通过一个Container组件可以实现同时需要装饰、变换、限制的场景
class CardWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFCCCCCC),
      appBar: AppBar(
        title: Text("卡片"),
      ),
      body: Column(
        children: <Widget>[
          GestureDetector(
            onTap: () => {Fluttertoast.showToast(msg: "点击了卡片")},
            child: Container(
//              alignment: Alignment.topLeft,
              margin: EdgeInsets.symmetric(horizontal: 12, vertical: 12),
              padding: EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        Icons.account_circle,
                        color: Colors.blue,
                      ),
                      Text(
                        "客户姓名",
                        style: TextStyle(
                          color: Color(0xFF333333),
//                      backgroundColor: Colors.red,
                          fontSize: 15,
                          fontWeight: FontWeight.bold,
//                      fontWeight: FontWeight.w500,
                        ),
                      ).padding(EdgeInsets.only(left: 8)).click(() {
                        Fluttertoast.showToast(msg: "点击了客户姓名");
                      }),
                      Text(
                        "1文本过长，末尾隐藏" * 4,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          color: Color(0xFF666666),
//                      backgroundColor: Colors.red,
                          fontSize: 12,
                        ),
                      ).padding(EdgeInsets.only(left: 8)).click(() {
                        Fluttertoast.showToast(msg: "哈哈哈");
                      }).expanded(),
                      Icon(
                        Icons.add_alarm,
                        color: Colors.redAccent,
                        size: 20,
                      )
                    ],
                  ).visible(true),
                  Divider(
                    height: 20,
                    thickness: 0.5,
                    color: Colors.lightBlueAccent,
                  ) /*.padding(EdgeInsets.only(left: 30,top: 10))*/,
                  Row(
                    children: <Widget>[
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Icon(
                            Icons.account_circle,
                            color: Colors.blue,
                          ),
                          Text(
                            "客户姓名",
                            style: TextStyle(
                              color: Color(0xFF333333),
                              fontSize: 15,
                              fontWeight: FontWeight.bold,
//                      fontWeight: FontWeight.w500,
                            ),
                          ).padding(EdgeInsets.only(left: 8)).click(() {
                            Fluttertoast.showToast(msg: "点击了客户姓名");
                          }),
                          Flexible(
                            fit: FlexFit.loose, // 尽可能大的填满剩余空间，但是可以不填满
                            child: Text(
                              "2文本过长，按钮最右，末尾隐藏" * 10,
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                color: Color(0xFF666666),
//                      backgroundColor: Colors.red,
                                fontSize: 12,
                              ),
                            ).padding(EdgeInsets.only(left: 8)),
                          ),
                          Icon(
                            Icons.content_copy,
                            color: Colors.redAccent,
                            size: 20,
                          ).padding(EdgeInsets.only(left: 5)).click(() {
                            Fluttertoast.showToast(msg: "点击了复制按钮");
                          }),
                        ],
                      ).expanded(),
                      Icon(
                        Icons.add_alarm,
                        color: Colors.redAccent,
                        size: 20,
                      ).padding(EdgeInsets.only(left: 10)).visible(false),
                    ],
                  ).visible(true),
                  Divider(
                    height: 20,
                    thickness: 0.5,
                    color: Colors.lightBlueAccent,
                  ),
                  Text(
                    "3文本过长，末尾隐藏" * 10,
//                    maxLines: 2,
                    overflow: TextOverflow.ellipsis, //加了他，如果没设置maxLines就会单行了
                  ),
                  Divider(
                    height: 20,
                    thickness: 0.5,
                    color: Colors.lightBlueAccent,
                  ),
                  RichText(
                    text: TextSpan(
                      children: [
                        WidgetSpan(
                          child: Icon(
                            Icons.add_alarm,
                            color: Colors.redAccent,
                            size: 20,
                          ),
                        ),
                        TextSpan(text: "我是RichText", style: TextStyle(color: Colors.blue)),
                      ],
                    ),
                  ),
                  Divider(
                    height: 20,
                    thickness: 0.5,
                    color: Colors.lightBlueAccent,
                  ),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Icon(
                        Icons.add_alarm,
                        color: Colors.redAccent,
                        size: 20,
                      ),
                      // 如果嵌套在Row里面，要加expanded()超过一行才能展示
                      Text(
                        "4如果嵌套在Row里面，要加expanded()" * 3,
//                        overflow: TextOverflow.ellipsis,
                      ).expanded(),
                    ],
                  ).visible(true),
                  Divider(
                    height: 20,
                    thickness: 0.5,
                    color: Colors.lightBlueAccent,
                  ),
                  Container(
                    height: 100,
                    child: Row(
                      children: <Widget>[
                        Container(
                          width: 100,
                          height: 100,
                          color: Colors.blueAccent,
                        ),
                        Container(
                          color: Colors.white,
                          child: Column(
                            children: <Widget>[
                              Row(
                                children: <Widget>[
                                  Flexible(
                                    fit: FlexFit.loose, // 拥有填满剩余空间的能力，但允许不填满
                                    child: Text(
                                      "5外层有容器expanded(),Row不需要再添加" * 4,
                                      overflow: TextOverflow.ellipsis,
                                      style: TextStyle(
                                        color: Color(0xFF666666),
//                      backgroundColor: Colors.red,
                                        fontSize: 12,
                                      ),
                                    ),
                                  ),
                                  Icon(
                                    Icons.content_copy,
                                    color: Colors.redAccent,
                                    size: 20,
                                  ).padding(EdgeInsets.only(left: 5)).click(() {
                                    Fluttertoast.showToast(msg: "点击了复制按钮");
                                  }),
                                ],
                              ),
                              Text(
                                "文本过长，末尾隐藏" * 4,
                                maxLines: 2,
                                overflow: TextOverflow.ellipsis,
                              )
                            ],
                          ).padding(EdgeInsets.only(left: 10)),
                        ).expanded()
                      ],
                    ),
                  ),
                  Divider(
                    height: 20,
                    thickness: 0.5,
                    color: Colors.lightBlueAccent,
                  ),
                  RatingBar(
                    selectedCount: 3,
                    canDeselect: true,
                    space: 3,
                    onSelected: (num) {
                      Fluttertoast.showToast(msg: '选中了$num个');
                    },
                  ),
                  // Row(
                  //   crossAxisAlignment: CrossAxisAlignment.start,
                  //   children: <Widget>[
                  //     Container(
                  //       width: 100,
                  //       height: 30,
                  //       color: Colors.blue,
                  //     ),
                  //     Container(
                  //       width: 500,
                  //       height: 30,
                  //       color: Colors.yellowAccent,
                  //     ),
                  //   ],
                  // ).expanded()
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
